import React from 'react'
import { NavLink } from 'react-router-dom';
import { Outlet, useLocation } from 'react-router-dom'

export default function Home() {
      // 当路由进行切换时会执行
    const { pathname } = useLocation();
  return (
    <div>
    <h2>Home组件内容</h2>
    <div>
        <ul className="nav nav-tabs">
            <li className={pathname.toLowerCase()==='/home/news'?'active':''}><NavLink to="/home/news">News</NavLink></li>
            <li className={pathname.toLowerCase()==="/home/message"?"active":""}><NavLink to="/home/message" >Message</NavLink>
            </li>
        </ul>
        <div>
            <div>
                <Outlet/>
            </div>
        </div>
    </div>
</div>
  )
}
